<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Navbar 导航栏</div>
    </ons-toolbar>

    <div class="content-wrapper">
        <div class="info-box">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-view-module" class="info-box-icon"></ons-icon>
                <div>
                    <div class="info-box-title">Navbar 组件</div>
                    <div class="info-box-content">底部导航栏，支持图标和徽章显示</div>
                </div>
            </div>
        </div>

        <h3 class="section-title">底部导航栏示例</h3>
        <div class="example-container">
            <p style="color: #666; margin-bottom: 20px;">点击下方按钮查看完整的底部导航栏示例</p>
            <ons-button modifier="large--cta" onclick="openNavbarDemo()">
                <ons-icon icon="md-open-in-new" style="margin-right: 8px;"></ons-icon>
                打开导航栏演示
            </ons-button>
            
            <div class="code-section" onclick="toggleSectionCode('navbar-example')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-navbar-example"></ons-icon>
                </div>
                <div class="code-display-section" id="code-navbar-example">
                    <pre><code>&lt;ons-tabbar swipeable position="bottom"&gt;
  &lt;ons-tab page="home.html" label="首页" icon="md-home" active&gt;&lt;/ons-tab&gt;
  &lt;ons-tab page="search.html" label="搜索" icon="md-search"&gt;&lt;/ons-tab&gt;
  &lt;ons-tab page="notifications.html" label="通知" icon="md-notifications" badge="5"&gt;&lt;/ons-tab&gt;
  &lt;ons-tab page="profile.html" label="我的" icon="md-account-circle"&gt;&lt;/ons-tab&gt;
&lt;/ons-tabbar&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('navbar-example')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <h3 class="section-title">导航栏特性</h3>
        <div class="example-container">
            <ons-list>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="md-check-circle" style="color: #27ae60; font-size: 24px;"></ons-icon>
                    </div>
                    <div class="center">
                        <span class="list-item__title">图标支持</span>
                        <span class="list-item__subtitle">支持 Material Design 图标</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="md-check-circle" style="color: #27ae60; font-size: 24px;"></ons-icon>
                    </div>
                    <div class="center">
                        <span class="list-item__title">徽章提示</span>
                        <span class="list-item__subtitle">可显示未读消息数量</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="md-check-circle" style="color: #27ae60; font-size: 24px;"></ons-icon>
                    </div>
                    <div class="center">
                        <span class="list-item__title">滑动切换</span>
                        <span class="list-item__subtitle">支持手势滑动切换标签</span>
                    </div>
                </ons-list-item>
                <ons-list-item>
                    <div class="left">
                        <ons-icon icon="md-check-circle" style="color: #27ae60; font-size: 24px;"></ons-icon>
                    </div>
                    <div class="center">
                        <span class="list-item__title">自动布局</span>
                        <span class="list-item__subtitle">自适应不同屏幕尺寸</span>
                    </div>
                </ons-list-item>
            </ons-list>
        </div>

        <h3 class="section-title">常用导航图标</h3>
        <div class="example-container">
            <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;">
                <div>
                    <ons-icon icon="md-home" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">首页</div>
                </div>
                <div>
                    <ons-icon icon="md-search" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">搜索</div>
                </div>
                <div>
                    <ons-icon icon="md-notifications" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">通知</div>
                </div>
                <div>
                    <ons-icon icon="md-account-circle" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">我的</div>
                </div>
                <div>
                    <ons-icon icon="md-shopping-cart" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">购物车</div>
                </div>
                <div>
                    <ons-icon icon="md-favorite" size="32px" style="color: #e74c3c;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">收藏</div>
                </div>
                <div>
                    <ons-icon icon="md-email" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">消息</div>
                </div>
                <div>
                    <ons-icon icon="md-settings" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">设置</div>
                </div>
            </div>
            
            <div class="code-section" onclick="toggleSectionCode('navbar-icons')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-navbar-icons"></ons-icon>
                </div>
                <div class="code-display-section" id="code-navbar-icons">
                    <pre><code>&lt;!-- 首页 --&gt;
&lt;ons-tab page="home.html" label="首页" icon="md-home"&gt;&lt;/ons-tab&gt;

&lt;!-- 搜索 --&gt;
&lt;ons-tab page="search.html" label="搜索" icon="md-search"&gt;&lt;/ons-tab&gt;

&lt;!-- 通知 --&gt;
&lt;ons-tab page="notifications.html" label="通知" icon="md-notifications"&gt;&lt;/ons-tab&gt;

&lt;!-- 我的 --&gt;
&lt;ons-tab page="profile.html" label="我的" icon="md-account-circle"&gt;&lt;/ons-tab&gt;

&lt;!-- 购物车 --&gt;
&lt;ons-tab page="cart.html" label="购物车" icon="md-shopping-cart"&gt;&lt;/ons-tab&gt;

&lt;!-- 收藏 --&gt;
&lt;ons-tab page="favorites.html" label="收藏" icon="md-favorite"&gt;&lt;/ons-tab&gt;

&lt;!-- 消息 --&gt;
&lt;ons-tab page="messages.html" label="消息" icon="md-email"&gt;&lt;/ons-tab&gt;

&lt;!-- 设置 --&gt;
&lt;ons-tab page="settings.html" label="设置" icon="md-settings"&gt;&lt;/ons-tab&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('navbar-icons')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="success-box mt-30">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-check-circle" style="color: #4caf50; font-size: 24px; margin-right: 12px;"></ons-icon>
                <div style="color: #2e7d32; line-height: 1.6;">
                    <strong>提示：</strong>导航栏适合用于主要功能的快速切换，建议使用 3-5 个标签页
                </div>
            </div>
        </div>
    </div>

    <style>
        .code-section {
            margin-top: 20px;
            cursor: pointer;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .code-section:hover {
            border-color: #667eea;
        }
        
        .code-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: #f8f9fa;
            font-weight: 500;
            color: #667eea;
        }
        
        .code-display-section {
            display: none;
            position: relative;
            background: #2d3748;
            padding: 16px;
        }
        
        .code-display-section.expanded {
            display: block;
        }
        
        .code-display-section pre {
            margin: 0;
            padding: 0;
            background: transparent;
        }
        
        .code-display-section code {
            color: #e2e8f0;
            font-size: 13px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        .section-copy-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #e2e8f0;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }
        
        .section-copy-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .section-copy-btn ons-icon {
            font-size: 16px;
        }
    </style>
    
    <script>
        function openNavbarDemo() {
            // 在新页面中打开导航栏演示
            var contentNavigator = document.getElementById('contentNavigator');
            contentNavigator.pushPage('examples/navbar-demo.html');
        }
        
        // Toggle section code display
        function toggleSectionCode(sectionId) {
            var codeDisplay = document.getElementById('code-' + sectionId);
            var icon = document.getElementById('icon-' + sectionId);
            
            if (codeDisplay.classList.contains('expanded')) {
                codeDisplay.classList.remove('expanded');
                icon.setAttribute('icon', 'md-chevron-down');
            } else {
                codeDisplay.classList.add('expanded');
                icon.setAttribute('icon', 'md-chevron-up');
            }
        }
        
        // Copy section code
        function copySectionCode(sectionId) {
            var codeElement = document.querySelector('#code-' + sectionId + ' code');
            var text = codeElement.textContent;
            
            // Create temporary textarea
            var textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            
            try {
                document.execCommand('copy');
                ons.notification.toast('代码已复制到剪贴板', {
                    timeout: 2000,
                    animation: 'ascend'
                });
            } catch (err) {
                ons.notification.toast('复制失败，请手动复制', {
                    timeout: 2000
                });
            }
            
            document.body.removeChild(textarea);
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
